<template>
  <div class="cart-container">
    <h2>戈堂瑞的购物车</h2>
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>酒名</th>
          <th>图片</th>
          <th>价格</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in cart" :key="item.id">
          <td>{{ index + 1 }}</td>
          <td>{{ item.name }}</td>
          <td>
            <img :src="item.image" alt="商品图片" />
          </td>
          <td>￥{{ item.price }}</td>
          <td>
            <div class="quantity-control">
              <button @click="decreaseQuantity(item)">&#8722;</button>
              <span>{{ item.quantity }}</span>
              <button @click="increaseQuantity(item)">+</button>
            </div>
          </td>
          <td>
            <button class="delete-btn" @click="removeItem(item.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { reactive } from "vue";

const cart = reactive([
  { id: 1, name: "汾酒", price: 30, quantity: 1, image: "/public/assets/汾酒.png" },
  { id: 2, name: "茅台", price: 28, quantity: 1, image: "/public/assets/茅台.jpg" },
  { id: 3, name: "五粮液", price: 16, quantity: 1, image: "/public/assets/五粮液.jpg" },
]);

const increaseQuantity = (item) => {
  item.quantity++;
};

const decreaseQuantity = (item) => {
  if (item.quantity > 1) {
    item.quantity--;
  }
};

const removeItem = (itemId) => {
  const index = cart.findIndex((item) => item.id === itemId);
  if (index !== -1) {
    cart.splice(index, 1);
  }
};
</script>

<style scoped>
.cart-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f9f2f8; 
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

h2 {
  color: #66bb6a; 
  text-align: center;
  margin-bottom: 30px;
  font-size: 28px;
}

table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

th {
  background-color: #66bb6a; 
  color: white;
  padding: 15px;
  font-weight: 600;
  text-align: center;
}

td {
  padding: 15px;
  text-align: center;
  border-bottom: 1px solid #e8e0e7; 
}

tr:hover {
  background-color: #fdf6f9; 
}

img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e8e0e7; 
}

.quantity-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.quantity-control button {
  width: 30px;
  height: 30px;
  border: none;
  background-color: #66bb6a; 
  color: white;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.quantity-control button:hover {
  background-color: #43a047; 
}

.quantity-control span {
  min-width: 20px;
  font-weight: 600;
  color: #333;
}

.delete-btn {
  padding: 8px 15px;
  background-color: #ec407a; 
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.delete-btn:hover {
  background-color: #d81b60; 
}
</style>